<template>
  <div>
    <dialog-edit :visible.sync="dialogVisible" :title="$attrs.title" ref="userManageEdit" width="1000"
                 height="600" @save="save" :loading="loading">
      <template slot="body">
        <dym-form :formData="localFormData" :components="components" :formRules="formRules" ref="dymForm">
          <template slot="Departid" slot-scope="scope">
            <!--                        <selectPageTest :value.sync="scope.row.Departid" :api="deparatmentApi" returnLabel="Departs" :class="scope.changed ? 'inputClass' : '{}'"-->
            <!--                                        labelKey="Name" valueKey="Id" searchKey="keywords" :changed="scope.changed"></selectPageTest>-->
<!--            <v-selectpage v-model="scope.row.Departid" data="URL" :params="params1"-->
<!--                          :class="scope.changed ? 'inputClass' : '{}'"-->
<!--                          searchField="keywords" ref="selectDepart"-->
<!--                          keyField="Id" showField="Name"-->
<!--                          :result-format="resultFormat1" placeholder="请选择部门" title="部门"></v-selectpage>-->
            <select-depart v-model="scope.row.Departid" placeholder="请选择部门"></select-depart>
          </template>
          <template slot="Positionid" slot-scope="scope">
            <select-position v-model="scope.row.Positionid" placeholder="请选择职位"></select-position>
<!--            <v-selectpage v-model="scope.row.Positionid" data="URL" :params="params2"-->
<!--                          :class="scope.changed ? 'inputClass' : '{}'"-->
<!--                          search-field="keywords" ref="selectPosition"-->
<!--                          key-field="Id" show-field="Name"-->
<!--                          :result-format="resultFormat2" placeholder="请选择职位" title="职位"></v-selectpage>-->
          </template>
        </dym-form>
      </template>
    </dialog-edit>
  </div>
</template>

<script>
import dialogEdit from '@/components/element/dialogEdit'
import dymForm from '@/components/element/dymForm'
import SelectPage from '@/components/element/SelectPage'
// import {userApi, deparatmentApi} from '@/api/organizationApiNow.js'
import userApi from '@/api/organizationApi/userApi.js'
import deparatmentApi from '@/api/organizationApi/deparatmentApi.js'
import * as format from '@/filters/index'
import SelectDepart from "@/components/element/select/SelectDepart";
import SelectPosition from "@/components/element/select/SelectPosition";

export default {
  components: {
    dialogEdit,
    dymForm,
    SelectPage,
    SelectDepart,
    SelectPosition
  },
  computed: {
    dialogVisible: {
      get: function () {
        return this.visible
      },
      set: function (value) {
        this.$emit('update:visible', value)
      }
    }
  },
  props: {
    visible: {
      type: Boolean,
      default() {
        return false;
      }
    },
    formData: {
      type: Object,
      default() {
        return {};
      }
    },
    Password: {
      type: String,
      default() {
        return '';
      }
    },
    editModel: {
      type: String,
      default() {
        return '';
      }
    }
  },
  data() {
    return {
      localFormData: {},
      loading: false,
      testVal: '',
      deparatmentApi: deparatmentApi,
      test1: '',
      activeNames: ['1', '2'],
      components: [
        {
          label: '用户名',
          span: 24,
          placeholder: '请输入用户名',
          prop: 'Username',
          value: 'Username',
          componentName: 'vxe-input'
        },
        {
          label: '密码',
          span: 24,
          placeholder: '请输入密码',
          prop: 'Password',
          value: 'Password',
          componentName: 'vxe-input'
        },
        {
          label: '部门',
          span: 24,
          placeholder: '请选择部门',
          prop: 'Departid',
          value: 'Departid',
          slot: true
        },
        {
          label: '职位',
          span: 24,
          placeholder: '请选择职位',
          prop: 'Positionid',
          value: 'Positionid',
          slot: true
        },
        {
          label: '姓名',
          span: 24,
          placeholder: '请输入姓名',
          prop: 'Realname',
          value: 'Realname',
          componentName: 'vxe-input'
        },
        {
          label: '性别',
          span: 24,
          placeholder: '请选择性别',
          prop: 'Sex',
          value: 'Sex',
          componentName: 'SelectDiction',
          DictTypeCode: 'SEX'
        },
        {
          label: '邮箱',
          span: 24,
          placeholder: '请输入邮箱',
          prop: 'Email',
          value: 'Email',
          componentName: 'vxe-input'
        },
        {
          label: '手机号',
          span: 24,
          placeholder: '请输入手机号',
          prop: 'Phone',
          value: 'Phone',
          maxLength: 11,
          componentName: 'vxe-input'
        },
        {
          label: '地址',
          span: 24,
          placeholder: '请输入地址',
          prop: 'Address',
          value: 'Address',
          componentName: 'vxe-input'
        }

      ],
      formRules: {
        Username: [
          {required: true, message: '请输入用户名'},
        ],
        Departid: [
          {required: true, message: '请选择部门'},
        ],
        Positionid: [
          {required: true, message: '请选择职位'},
        ],
        Realname: [
          {required: true, message: '请输入姓名'},
        ],
        Email: [
          {required: true, message: '请输入邮箱'},
        ]
      },
      // params1: {
      //   pageSizeName: 'pageoffset',
      //   pageNumberName: 'p',
      //   url: 'v1/department/page',
      //   method: 'get'
      // },
      // params2: {
      //   pageSizeName: 'pageoffset',
      //   pageNumberName: 'p',
      //   url: 'v1/positions/page',
      //   method: 'get'
      // },
      departmentInit: false,
      positionInit: false
    }
  },
  methods: {
    change(val) {
      console.log(this.localFormData.Departid)
    },
    resultFormat1(res) {
      if (this.editModel === 'C') {
        this.$refs.selectDepart.remove()
      }
      if (this.departmentInit && this.editModel !== 'C') {
        let list = res.Departs.filter(item => {
          return item.Id === this.localFormData.Departid
        })
        this.departmentInit = false
        return {
          totalRow: res.Total,
          list: list
        }
      }
      if (res && res.Departs.length !== 0) {
        return {
          totalRow: res.Total,
          list: res.Departs
        }
      } else {
        return {
          totalRow: 0,
          list: []
        }
      }
    },
    resultFormat2(res) {
      if (this.editModel === 'C') {
        this.$refs.selectPosition.remove()
      }
      if (this.positionInit && this.editModel !== 'C') {
        let list = res.Positions.filter(item => {
          return item.Id === this.localFormData.Positionid
        })
        this.positionInit = false
        return {
          totalRow: res.Total,
          list: list
        }
      }
      if (res && res.Positions.length !== 0) {
        return {
          totalRow: res.Total,
          list: res.Positions
        }
      }else {
        return {
          totalRow: 0,
          list: []
        }
      }
    },
    save() {
      this.$refs.dymForm.$refs.form.validate().then(() => {
        // this.localFormData.Password = this.Password
        this.localFormData.Birth = format.formatDateToStamp(this.localFormData.Birth)
        this.localFormData.Id = this.localFormData.Userid
        if (!this.localFormData.Id) {
          userApi.create(this.localFormData).then(res => {
            this.$XModal.message({message: res.message, status: res.code === 1 ? 'success' : 'error'})
            if (res.code === 1) {
              this.dialogVisible = false
              this.$emit('saveClose')
            }
          })
        } else {
          userApi.update(this.localFormData).then(res => {
            this.$XModal.message({message: res.message, status: res.code === 1 ? 'success' : 'error'})
            if (res.code === 1) {
              this.dialogVisible = false
              this.$emit('saveClose')
            }
          })
        }
      }).catch(() => {
        this.$XModal.message({message: '表单填写错误，请检查', status: 'error'})
      })
    }
  },
  watch: {
    'visible': {
      handler(val) {
        this.localFormData = JSON.parse(JSON.stringify(this.formData))
        this.localFormData.Sex = this.localFormData.Sex.toString()
        if (this.localFormData.Positionid && this.localFormData.Positionid !== '0') {
          this.localFormData.Positionid = this.localFormData.Positionid.toString()
        } else {
          this.localFormData.Positionid = ''
        }
        this.loading = true
        this.departmentInit = true
        this.positionInit = true
        if (val && this.$refs.dymForm !== undefined) {
          this.$refs.dymForm.$refs.form.clearValidate()
        }
        setTimeout(() => {
          this.loading = false
        }, 300)
      }
    }
  }
}
</script>

<style scoped>
</style>
